<!DOCTYPE html>
<html>
<head>
<title>Sample of side-by-side tables with scroll functionality</title>
<!-- 13/12/30 j.j.king for table helper -->
<!-- 14/01/16 works in firefox but not in safari -->

<style>
/* div, table, tr, td, th { margin: 0; padding: 0; } */

table { border-collapse: collapse; }
td, th { border: solid thin gray; }

#div-left { float: left; overflow-y: hidden; height: 100px; }
#div-right { float: left; overflow-y: scroll; height: 100px; }
</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js"></script>
<script src="jjkingTableHelper.js"></script>
<script>

$(document).ready(function()
{
	console.log('ready');
	
	$('#div-right').on('scroll', [ $('#div-left') ], jjkingTableHelper.scrolledVertically);

	$('#table-right').on('resize', [ $('#table-left') ], jjkingTableHelper.heightChanged);
	
	$('#resizeButton').on('click', function(e)
	{
		$('#table-right').trigger('resize');
	});
});

</script>
</head>
<body style="margin: 2em">

<h3>Sample of side-by-side tables with scroll functionality</h3>

<p>
This sample HTML table demonstrates use of J.J.King's table helper library.
<br/>
The scroll handler of the library is used to interlock scrolling of two tables placed side by side.
<br/>
This sample also demonstrates interlocking of row height of the two tables.
</p>

<p>
<button id="resizeButton">Resize</button>
</p>

<div id="div-left">
<table id="table-left">
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One two three<br/>four five six<br/>seven eight ten</td>
		<td>Two Two</td>
		<td>Three Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
</table>
</div>
<div id="div-right">
<table id="table-right">
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One and One</td>
		<td>Two and Two</td>
		<td>Three and Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One and One</td>
		<td>Two and Two</td>
		<td>Three and Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
</table>
</div>
</body>
</html>